<template>
  <div class="optimGoods">
    <div class="top">
      <div class="top_main">
        <div class="top_left">
          <div>
            <img
              style="margin-right:6px"
              :src="require('@/assets/images/19.png')"
              alt=""
              srcset=""
            />
            <router-link to="/optimGoods">首页</router-link>
          </div>
          <div v-if="logined" style="margin-left:8px">
            欢迎您:{{ name }}
            <router-link style="margin-left:10px" to="/userinfo"
              >个人中心</router-link
            >
            <span style="cursor: pointer;margin-left:5px" @click="dologout">
              <a>退出</a>
            </span>
          </div>
          <div v-else>
            您好 ，<router-link
              :to="{ path: '/login/login', query: { active: 'login' } }"
              >请登录</router-link
            >
          </div>
          <div style="margin-left:10px">
            <router-link
              :to="{ path: '/login/login', query: { active: 'register' } }"
              >免费注册</router-link
            >
          </div>
        </div>
        <div v-show="searchshow" class="top_center">
          <el-input
            placeholder="支持商品名称和店铺名称搜索"
            v-model.trim="searchipt"
            @change="dosearch"
          >
            <!-- <div slot="prefix">
              <el-radio-group v-model="radio" size="mini">
                <el-radio-button label="1">宝贝</el-radio-button>
                <el-radio-button label="2">店铺</el-radio-button>
              </el-radio-group>
            </div> -->
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="top_right">
          <div>
            <router-link to="/optimGoods/taocashgift">淘礼金</router-link>
          </div>
          <div class="hot">
            <router-link to="/optimGoods/widge">小工具</router-link>
            <img :src="require('@/assets/images/hot.png')" alt="" />
          </div>

          <div><router-link to="/optimGoods">商家合作</router-link></div>
          <div><router-link to="/optimGoods">开放平台API</router-link></div>
          <div><router-link to="/helper">帮助中心</router-link></div>
          <div><router-link to="/optimGoods">联系我们</router-link></div>
        </div>
      </div>
    </div>
    <div class="header">
      <div class="header_main">
        <!-- <div class="header_left">淘宝高佣选品库</div> -->
        <logo></logo>
        <div class="header_search">
          <div class="search_top">
            <el-input
              class="search_ipt"
              v-model.trim="searchipt"
              :clearable="true"
              @keyup.enter.native="dosearch"
              placeholder="请输入商品名称或店铺名称"
            ></el-input>
            <el-button
              style="width:100px;font-size: 16px;box-sizing: border-box;padding: 11px 23px;"
              type="primary"
              round
              @click="dosearch"
              >搜 索</el-button
            >
          </div>
          <div class="search_hot">
            <a href="#">拖鞋</a>
            <a href="#">睡衣</a>
            <a href="#">手套</a>
            <a href="#">加湿器</a>
            <a href="#">羽绒服</a>
            <a href="#">耳机</a>
          </div>
        </div>
        <div class="header_action">
          <a href="#" class="action_box">
            <img :src="require('@/assets/images/man.png')" alt="" />
            <p>人工审核</p>
          </a>
          <a href="#" class="action_box">
            <img :src="require('@/assets/images/search.png')" alt="" />
            <p>实时排查</p>
          </a>
          <a href="#" class="action_box">
            <img :src="require('@/assets/images/tags.png')" alt="" />
            <p>持续更新</p>
          </a>
        </div>
      </div>
    </div>
    <div class="topBar bgc">
      <div class="topBar_main">
        <div class="topBar_box">
          <span @mouseenter="show3 = false">
            <router-link class="topBar_link c1" to="/optimGoods/optimBank"
              >优选库</router-link
            >
            <router-link class="topBar_link" to="/optimGoods/nowList"
              >实时榜单</router-link
            >
            <router-link class="topBar_link" to="/optimGoods/meatlive"
              >肉单直播</router-link
            >
            <router-link class="topBar_link" to="/optimGoods/siftGoods"
              >全部商品</router-link
            >
            <router-link class="topBar_link" to="/optimGoods/widge"
              >小工具</router-link
            >
          </span>
          <span @mouseenter="show3 = true" class="marketing">
            <!-- @mouseleave="show3 = false" -->
            <img
              class="marketing_img"
              :src="require('@/assets/images/22.png')"
              alt=""
            />
            <span>营销中心</span>
            <img
              style="width:16px;"
              :src="require('@/assets/images/icon_bot.png')"
              alt=""
            />
          </span>
        </div>
      </div>
    </div>
    <!-- <div> -->
    <!-- <el-collapse-transition> -->
    <transition name="el-zoom-in-top">
      <div v-if="show3" @mouseenter="show3 = true" @mouseleave="show3 = false">
        <div ref="marketbox" class="market_Box">
          <div class="market_Box_main">
            <el-row :gutter="20">
              <el-col v-for="item in market" :key="item.url" :span="6"
                ><div class="market_li">
                  <img :src="item.url" alt="" />
                  <div>
                    <p>{{ item.title }}</p>
                    <p>{{ item.info }}</p>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </div>
      </div>
    </transition>
    <!-- </el-collapse-transition> -->
    <transition
      enter-active-class="animated fadeIn "
      leave-active-class="animated fadeOut "
      mode="out-in"
    >
      <router-view ref="sifi" />
    </transition>
    <botloading></botloading>

    <div class="sider">
      <div class="sidebar">
        <div class="siderbar_box">
          <div class="siderbar_item i1" @click="dialogue = !dialogue">
            <div class="rool r1"></div>
            <div class="text t1">在线客服</div>
          </div>
          <div class="siderbar_item i2" @click="showcoll">
            <div class="rool r2"></div>
            <div class="text t2">我的收藏</div>
          </div>
          <div class="siderbar_item i3" @click="gohelper">
            <div class="rool r3"></div>
            <div class="text t3">帮助中心</div>
          </div>
          <div class="siderbar_item i4" @click="gobacktop">
            <div class="rool r4"></div>
          </div>
        </div>
        <transition name="draw">
          <div
            class="popcontainer"
            v-show="dialogue"
            @click.stop="dialogue = false"
          >
            <div
              v-show="dialogue"
              class="dialogue"
              ref="dialogue"
              @mouseenter="opendialogue"
              @mouseleave="closedialogue"
            >
              <span class="qqimg"></span>
              <div>
                <div>咨询在线客服</div>
                <a
                  href="http://wpa.qq.com/msgrd?v=3&uin=2842817994&site=qq&menu=yes"
                  target="_blank"
                  >测试客服1</a
                >
              </div>
              <div class="triangle"></div>
            </div>
          </div>
        </transition>
        <transition name="slide-fade">
          <div
            class="popcontainer"
            v-show="collect"
            @click.stop="collect = false"
          >
            <div class="collect" ref="collect" @click.stop="collect = true">
              <!-- @mouseenter="opendialogue"
            @mouseleave="closedialogue" -->
              <div class="tabs">
                <el-radio-group v-model="tabsid" @change="tabschange">
                  <el-radio-button label="1">有效商品</el-radio-button>
                  <el-radio-button label="2">无效商品</el-radio-button>
                </el-radio-group>
              </div>
              <div class="collectbox">
                <div class="goods_top">
                  <div class="rowBox" v-if="topList.length > 0">
                    <div
                      class="hover_box"
                      v-for="(item, index) in topList"
                      :key="index"
                    >
                      <el-card shadow="always" :body-style="{ padding: '0px' }">
                        <div class="top_main">
                          <div
                            class="demo-image__lazy"
                            style="cursor: pointer;width:130px;height:130px"
                          >
                            <!-- @click="godetails(item.id)" -->
                            <el-image class="elimg" fit :src="item.goods_img">
                              <!-- lazy -->
                              <!-- <div slot="placeholder" class="image-slot">
                                <img
                                  style="display:inline-block;width:100%;height:100%"
                                  :src="require('@/assets/images/download.gif')"
                                  alt=""
                                  srcset=""
                                />
                              </div> -->
                            </el-image>
                          </div>
                          <div class="top_right">
                            <div class="top_title">
                              <img
                                style="width: 20px;"
                                :src="require('@/assets/images/01.png')"
                                alt=""
                              />
                              <a
                                target="_blank"
                                style=" white-space: nowrap;overflow: hidden;text-overflow:ellipsis;"
                                :href="item.goods_url"
                                >{{ item.goods_name }}</a
                              >
                            </div>

                            <div class="top_data">
                              <div>
                                <p>{{ item.coupon_price }}</p>
                                <p>优惠卷</p>
                              </div>
                              <div>
                                <p>{{ item.commission_than }}</p>
                                <p>佣金比</p>
                              </div>

                              <div>
                                <p>
                                  {{
                                    (
                                      item.commission_than *
                                      (item.commission_than / 100)
                                    ).toFixed(2)
                                  }}
                                </p>
                                <p>佣金</p>
                              </div>
                            </div>
                            <div class="bot_img">
                              <div
                                class="boticon  btn1"
                                v-clipboard:copy="item.copywriting"
                                v-clipboard:success="onCopy"
                                v-clipboard:error="onError"
                              ></div>
                              <div
                                class="boticon  btn2"
                                @click="showcopy(item.id)"
                              ></div>
                              <div
                                class="boticon  btn3"
                                @click="delCollection(item.id)"
                              ></div>
                            </div>
                          </div>
                        </div>
                        <div
                          style="margin:10px;text-align:left;display:none"
                          :ref="'copyshow' + item.id"
                        >
                          {{ item.copywriting }}
                        </div>
                      </el-card>
                    </div>
                  </div>
                  <div
                    v-else
                    style="width:100%;text-align:center;margin-top:20px"
                  >
                    Sorry!暂无收藏数据
                  </div>
                </div>
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import { loginOut, getCollectionList, delCollection } from "@/api/user/user";
// import { getUserInfo } from "@/api/userinfo/userinfo";
// import { getGoodsList } from "@/api/goods/goods";
import botloading from "@/components/botloading.vue";
import logo from "@/components/logo.vue";
import footerbox from "@/components/footerbox.vue";

export default {
  name: "optimGoods",
  components: {
    botloading,
    logo,
    footerbox
  },
  data() {
    return {
      copyshow: false,
      searchshow: false,
      topipt: "",
      radio: "",
      tabsid: "1",
      collect: false,
      dialogue: false,
      show3: false,
      name: "",
      logined: this.$ls.get("token") ? true : false,
      searchipt: "",
      market: [
        {
          url: require("@/assets/images/17-1.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-2.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-3.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-4.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-5.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-6.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-8.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        },
        {
          url: require("@/assets/images/17-9.png"),
          title: "社群发单软件",
          info: "淘宝社交流量推广利器"
        }
      ],
      topList: [
        // {
        //   id: 15, //商品id
        //   goods_name: "【明星同款】Champion带标 短袖T恤 经典刺秀 男女款", //商品名称
        //   nickname: "17339612793",
        //   coupon_price: "0.00", //优惠卷金额
        //   goods_img: require("@/assets/images/goodsimg.jpg"), //商品主图
        //   goods_price: "30.00", //商品单价
        //   after_coupon_price: "40.00", // 卷后单价
        //   commission_than: "10", //佣金比例
        //   coupon_collar_count: 1, //优惠卷领取数量
        //   goods_day_num: 0, //月销量
        //   coupon_num: 10, // 优惠卷总量
        //   shop_name: "测试店铺" //店铺名称
        // }
        // {
        //   id: 1, //商品id
        //   coupon_price: "0.00", //优惠卷金额
        //   goods_name: "【明星同款】Champion带标 短袖T恤 经典刺秀 男女款", //商品名称
        //   nickname: "17339612793",
        //   goods_img: require("@/assets/images/goodsimg.jpg"), //商品主图
        //   goods_price: "30.00", //商品单价
        //   after_coupon_price: "40.00", // 卷后单价
        //   commission_than: "10", //佣金比例
        //   coupon_collar_count: 1, //优惠卷领取数量
        //   goods_day_num: 0, //月销量
        //   coupon_num: 10, // 优惠卷总量
        //   shop_name: "测试店铺" //店铺名称
        // }
      ]
    };
  },
  watch: {
    searchipt: {
      handler() {
        console.log("内容", this.searchipt);
        // setGoodsName();
        this.$ls.set("goodsname", this.searchipt);
      }
      // immediate: true,  //刷新加载 立马触发一次handler
      // deep: true  // 可以深度检测到对象的属性值的变化
    }
  },
  computed: {},
  created() {
    if (this.$ls.get("userinfo")) {
      this.name = this.$ls.get("userinfo").nickname;
    }
  },
  mounted() {
    window.addEventListener("scroll", this.showIpt);
  },
  methods: {
    onCopy() {
      this.$message.success("复制成功!");
    },
    onError() {
      this.$message.error("复制失败!");
    },
    showcoll() {
      this.collect = !this.collect;
      if (this.collect == true) {
        this.tabsid = "1";
        this.getCollectionList(1, 15, 1);
      }
    },
    //删除收藏
    delCollection(goods_id) {
      delCollection({
        goods_id: goods_id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log("删除返回", res);
            this.$message.success("删除成功!");
            this.getCollectionList(1, 15, parseInt(this.tabsid));
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 展示文案
    showcopy(id) {
      console.log(id);
      var copybox = this.$refs["copyshow" + id][0];
      if (copybox.style.display == "block") {
        copybox.style.display = "none";
      } else {
        copybox.style.display = "block";
      }
      // console.log(this.$refs["copyshow" + id][0]);
    },
    //获取收藏列表
    getCollectionList(page, pagesize, type) {
      getCollectionList({
        page: page,
        pagesize: pagesize,
        type: type
      })
        .then(res => {
          if (res.code == 200) {
            console.log("收藏列表", res.data);
            this.topList = res.data.data;
            // this.$message.success("成功!");
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    showIpt() {
      if (
        !!document.documentElement.scrollTop &&
        document.documentElement.scrollTop > 150
      ) {
        // 页面高度大于200执行操作;
        this.searchshow = true;
      } else {
        this.searchshow = false;
        // 页面高度小于200执行操作;
      }
    },
    // 帮助中心
    gohelper() {
      this.$router.push({
        path: `/helper`
      });
    },
    //返回顶部
    gobacktop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 150;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    tabschange(val) {
      console.log("tabs", val);
      this.getCollectionList(1, 15, parseInt(val));
    },
    closedialogue() {
      // this.$refs.dialogue.style.opacity = 0;
      this.dialogue = false;
    },
    // 打开对话
    opendialogue() {
      this.dialogue = true;
      // console.log((this.$refs.dialogue.style.opacity = 1);
      // this.$refs.dialogue.style.opacity = 1;
    },
    dosearch() {
      if (this.$route.name === "siftGoods") {
        // this.$store.commit("SET_GOODSNAME", this.searchipt);
        // setGoodsName(this.searchipt);
        this.$refs.sifi.search({ goods_name: this.searchipt }); // 调用子组件的方法childClick
        // this.$router.go(0);
      } else {
        // setGoodsName(this.searchipt);
        this.$router.push({
          path: "/optimGoods/siftGoods"
          // query: {
          //   goods_name: this.searchipt
          // }
        });
      }
    },
    // 获取用户信息
    // getUserInfo() {
    //   getUserInfo()
    //     .then(res => {
    //       if (res.code == 200) {
    //         console.log("用户信息", res);
    //         // setUserinfo(res.data);
    //         this.$ls.set("userinfo", res.data);
    //         this.name = res.data.nickname;
    //       } else {
    //         this.$message.error(res.msg);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    dologout() {
      loginOut()
        // loginOut({
        //   token: getToken()
        // })
        .then(res => {
          console.log(res);
          // removeToken();
          this.$ls.clear();
          this.$message({
            showClose: false,
            message: "注销成功"
          });
        })
        .catch(err => {
          console.log(err);
        });
      this.logined = false;
      // this.$router.push("/login");
    }
  }
};
</script>

<style lang="less" scoped>
.draw-enter-active,
.draw-leave-active {
  transition: opacity 0.5s;
}
.draw-enter,
.draw-leave-to {
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all 0.5s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(-45px);
  opacity: 0;
}
.sider {
  // position: relative;
  .sidebar {
    width: 80px;
    // height: 300px;
    position: fixed;
    // background-color: gray;
    top: 40%;
    right: 0;
    .siderbar_box {
      .siderbar_item {
        position: relative;
        float: right;
        // margin-top: 15px;
        width: 48px;
        height: 48px;
        border-radius: 5px;
        border: 1px #d6d6d6 solid;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        cursor: pointer;
        transition: all 300ms ease;
        .rool {
          background: url("~@/assets/images/rtool.png");
          width: 48px;
          height: 48px;
          // transition: all 300ms ease;
        }
      }
      .i1 {
        top: 0;
        .r1 {
          background-position: 0 0;
        }
      }
      .i1:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r1 {
          background-position: 48px 0;
        }
      }
      .i2 {
        top: 10px;
        .r2 {
          background-position: 0 -48px;
        }
      }
      .i2:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r2 {
          background-position: 48px -48px;
        }
      }
      .i3 {
        top: 20px;
        .r3 {
          background-position: 0 -96px;
        }
      }
      .i3:hover {
        width: 120px;
        background: linear-gradient(#856eff, #5982ff);
        .r3 {
          background-position: 48px -96px;
        }
      }
      .i4 {
        top: 30px;
        .r4 {
          background-position: 0 -144px;
        }
      }
      .i4:hover {
        background: linear-gradient(#856eff, #5982ff);
        .r4 {
          background-position: 48px -144px;
        }
      }
    }
    .text {
      position: absolute;
      line-height: 48px;
      color: #fff;
      font-size: 14px;
      left: 48px;
    }
    .t1 {
      top: 0;
    }
    .t2 {
      top: 0;
    }
    .t3 {
      top: 0;
    }
    .dialogue {
      background-color: #fff;
      position: absolute;
      top: 40%;
      right: 140px;
      clear: both;
      width: 200px;
      height: 80px;
      border-radius: 10px;
      // opacity: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      transition: all 200ms ease;
      span {
        display: inline-block;
      }
      .qqimg {
        width: 50px;
        height: 50px;
        background: url("~@/assets/images/qq.png") no-repeat center;
        background-size: 48px 48px;
        // background-position: -3px 7px;
        // border-radius: 50%;
      }
      .triangle {
        position: absolute;
        width: 12px;
        height: 10px;
        transform: rotateZ(45deg);
        background-color: #fff;
        top: 17px;
        right: -6px;
      }
    }
    .popcontainer {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      background: transparent;
      // pointer-events: none;
      .collect::v-deep {
        background-color: #fff;
        position: absolute;
        top: 332px;
        right: 140px;
        clear: both;
        width: 400px;
        height: 600px;
        border-radius: 10px;
        // opacity: 0;
        box-shadow: 0 0 10px #eee;
        transition: 0.3s;
        box-sizing: border-box;
        transition: all 200ms ease;
        .tabs {
          width: 100%;
          margin-top: 20px;
          .el-radio-group {
            overflow: hidden;
            .el-radio-button__inner {
              width: 150px;
              height: 35px;
              line-height: 27px;
              box-sizing: border-box;
              padding: 5px 10px;
              // color: #fff;
              border-radius: 40px;
            }
            .is-active {
              .el-radio-button__inner {
                background: linear-gradient(
                  90deg,
                  rgba(15, 121, 233, 1),
                  rgba(107, 95, 254, 1),
                  rgba(87, 148, 255, 1)
                );
                color: #fff;
              }
            }
          }
        }
        .collectbox {
          width: 98%;
          margin: 0 auto;
          .goods_top {
            // width: 980px;
            position: relative;
            display: flex;
            // justify-content: space-between;
            align-items: center;
            .rowBox {
              width: 95%;
              margin: 0 auto;
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              align-items: center;
              max-height: 530px;
              overflow: hidden;
              overflow-y: visible;
              .hover_box {
                margin-top: 20px;
                position: relative;
                width: 400px;
                // height: 100px;
                border-radius: 15px;
                overflow: hidden;
                .elimg {
                  width: 130px;
                  height: 130px;
                  border-radius: 15px;
                  overflow: hidden;
                }
                .top_main {
                  // width: 947px;
                  overflow: hidden;
                  background-color: #fff;
                  // height: 220px;
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  .top_right {
                    padding: 6px;
                    width: 220px;
                    margin: 0 auto;

                    .top_title {
                      // width: 100%;
                      display: flex;
                      justify-content: flex-start;
                      align-items: center;
                      margin: 3px auto;
                      cursor: pointer;
                      a {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: 14px;
                        text-decoration: none;
                      }
                    }

                    .top_data {
                      height: 70px;
                      font-size: 13px;
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      p {
                        margin-top: 0 !important;
                        margin-bottom: 0 !important;
                      }
                      p:first-child {
                        color: #333;
                        font-size: 16px;
                        font-weight: bold;
                      }
                    }
                    .bot_img {
                      display: flex;
                      justify-content: space-around;
                      align-items: center;
                      .boticon {
                        width: 20px;
                        height: 20px;
                        cursor: pointer;
                        background: url("~@/assets/images/mico.png");
                      }
                      .btn1 {
                        background-position: 0px 80px;
                      }
                      .btn2 {
                        background-position: 0px 60px;
                      }
                      .btn3 {
                        background-position: 0px 40px;
                      }
                      .btn3:hover {
                        background-position: 20px 40px;
                      }
                    }
                  }
                }
              }
              // .hover_box:hover {
              // }
            }
          }
        }
      }
    }
  }
}

.optimGoods {
  width: 100%;
  background-color: #f6f6f6;
  a {
    color: rgb(136, 134, 134);
    text-decoration: none;
  }
  a:hover {
    color: rgb(38, 51, 243);
  }
  .top {
    position: fixed;
    top: 0;
    font-size: 14px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #f8f8f8;
    z-index: 9999;
    .top_main {
      // background-color: #e6e6e6;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgb(136, 134, 134);
      .top_left {
        width: 39 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .top_center::v-deep {
        .el-input__inner {
          height: 30px;
          width: 350px !important;
          // padding-left: 120px !important;
        }
        .el-radio-button__inner {
          padding: 8px 15px;
        }
        .el-radio-group {
          margin-left: -4px;
        }

        .el-input__icon {
          line-height: 30px;
        }
      }
      .top_right {
        width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .hot {
          position: relative;
          img {
            position: absolute;
            top: 0;
            right: -8px;
          }
        }
      }
    }
  }

  .header {
    background-color: #f6f6f6;
    margin-top: 30px;
    width: 100%;
    .header_main {
      // border-radius: ;
      background-color: #f6f6f6;
      overflow: hidden;
      width: 1200px;
      height: 130px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 20px;
      padding-bottom: 25px;
      // .header_left {
      //   font-size: 30px;
      // }
      .header_search {
        width: 520px;

        .search_top {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .search_ipt::v-deep {
            // overflow: hidden;
            width: 400px;
            .el-input__inner {
              border: 2px solid rgb(41, 123, 247);
              border-radius: 20px;
              border-top-right-radius: 0px;
              border-bottom-right-radius: 0px;
            }
          }
          .el-button {
            border: 1px solid rgb(41, 123, 247);
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            background: linear-gradient(
              -90deg,
              rgba(142, 107, 255, 1),
              rgba(80, 134, 255, 1)
            );
          }
        }
        .search_hot {
          width: 400px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          a {
            margin-left: 8px;
            padding-top: 5px;
          }
        }
      }
      .header_action {
        width: 220px;
        height: 68px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 10px;
        a:last-child {
          margin-right: 0;
        }
        .action_box {
          display: inline-block;
          width: 50px;
          // height: 58px;
          margin-right: 24px;
          img {
            width: 28px;
          }
        }
      }
    }
  }

  .topBar {
    position: relative;
    width: 100%;
    background: linear-gradient(
      90deg,
      rgba(107, 102, 255, 1),
      rgba(107, 95, 254, 1),
      rgba(87, 148, 255, 1)
    );
    color: white;
    font-size: 18px;
    .topBar_main {
      width: 1200px;
      margin: 0 auto;
      height: 56px;
      position: relative;
      .topBar_box {
        position: absolute;
        margin-top: -14px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topBar_link {
          display: inline-block;
          width: 170px;
          height: 70px;
          line-height: 56px;
          padding-top: 14px;
          color: white;
          box-sizing: border-box;
        }
        .router-link-active {
          background: url("~@/assets/images/nav_hover.png");
          background-position: 0 -70px;
        }
        .c1.router-link-active {
          background: url("~@/assets/images/nav_hover.png");
        }
      }
    }
    .marketing {
      display: inline-block;
      width: 170px;
      height: 70px;
      line-height: 56px;
      padding-top: 14px;
      color: white;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      .marketing_img {
        position: absolute;
        top: 16px;
        left: 20px;
      }
    }
  }
  .market_Box {
    position: absolute;
    padding-top: 30px;
    width: 100%;
    background-color: #fff;
    color: rgb(0, 0, 0);
    transition: all 0.1s inherit;
    z-index: 11111;
    padding-bottom: 30px;
    .market_Box_main {
      width: 1200px;
      margin: 0 auto;
      .market_li {
        margin-right: 10px;
        padding-top: 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
  .bgc {
    background-color: linear-gradient(
      90deg,
      rgba(255, 106, 68, 1),
      rgba(255, 133, 74, 1),
      rgba(255, 158, 79, 1)
    );
  }
}
</style>
